<template>
  <div class="wrap">
    <CHeader content="企业隐患排查" ref="head"></CHeader>
    <el-row>
      <el-col style="height: 75px">
        <div class="box">
          <el-radio-group v-model="filter.address">
            <el-radio-button
              v-for="(item, index) in regionArray"
              :key="index"
              :label="item.label"
            >{{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </el-col>
    </el-row>


    <el-row>
      <el-col class="header_top">
        <el-tabs v-model="activeName" @tab-click="handleClick">

          <el-tab-pane label="安全巡检" name="first">
            <el-col class="card_list">
              <el-col :span="5" class="card_list_item">
                <img src="@/assets/images/qyyhpc/1.png">
                <span style="font-size: 14px">当期任务总数：<span style="font-size: 20px">{{ totalObj.totalTask }}</span></span>
              </el-col>
              <el-col :span="5" class="card_list_item">
                <img src="@/assets/images/qyyhpc/2.png">
                <span style="font-size: 14px">已完成：<span style="font-size: 20px">{{ totalObj.finish }}</span></span>
              </el-col>
              <el-col :span="5" class="card_list_item">
                <img src="@/assets/images/qyyhpc/3.png">
                <span style="font-size: 14px">完成率：<span style="font-size: 20px">{{ totalObj.finishRate
                  }}</span></span>
              </el-col>
            </el-col>
            <el-col
              style="display: flex;padding: 0 30px;height: 71px;align-items: center;background: #fff;margin-top: 20px">
              <div style="display: flex;align-items: center">
                <el-col style="font-size: 14px;color: #5D6C8E;" :span="4">时间段：</el-col>
                <el-time-picker
                  is-range
                  v-model="value1"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-time-picker>
              </div>
              <div style="display: flex;margin-left: 19px;align-items: center">
                <span style="width: 100px;font-size: 14px;color: #5D6C8E;"> 企业名称：</span>
                <el-input placeholder="输入设备名称查询" v-model="companyName" />
              </div>
              <select2el v-model="value"
                         :suffixSlot="false"
                         :options="options"
                         placeholder="管控措施类型"
                         style="margin-left: 19px"
              />
              <select2el v-model="value"
                         :suffixSlot="false"
                         :options="options"
                         placeholder="岗位负责人"
                         style="margin:0 19px"
              />
              <select2el v-model="value"
                         :suffixSlot="false"
                         :options="options"
                         placeholder="巡检状态" />
              <el-button
                type="primary"
                icon="el-icon-search"
                @click.stop="onSubmit"
                style=" background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
                  box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
                  border-radius: 4px;
                  height: 32px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-left: 20px
                "
              >查询
              </el-button>
            </el-col>
            <!-- 分割线-->
            <el-divider class="divider"></el-divider>
            <el-col class="table_tool" style="margin-top: 20px;padding: 0 30px">
              <span>合计：{{ this.pageOption.total }}</span>
              <el-button type="primary" class="button">导出</el-button>
            </el-col>
            <el-col style="padding: 0 30px">
              <tableBox :data="tableData" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" :headerRowStyle="{ height: '16px' }" :height="tableHeight"
                        :mainMaxHeight="200" :pageOption.sync="pageOption" :headerCellStyle="{
              background: '#E0EAF5',
              height: '32px !important',
            }"
              >
                <el-table-column prop="id" label="序号" align="center" width="80" />
                <el-table-column prop="enterName" label="企业名称" />
                <el-table-column prop="RiskAnalysis" label="巡检状态" />
                <el-table-column prop="RiskAnalysisUnit" label="风险分析对象" />
                <el-table-column prop="securityRiskEvent" label="风险分析单元" />
                <el-table-column prop="id" label="安全风险事件" align="center" />
                <el-table-column prop="result" label="可能发生的严重后果" width="180" />
                <el-table-column prop="controlMeasures" label="管控措施类型" />
                <el-table-column prop="investigationContent" label="隐患排查内容" />
                <el-table-column prop="positionName" label="岗位名称" />
                <el-table-column prop="inspectionCycle" label="巡检周期" />
                <el-table-column prop="taskTimePeriod" label="任务时间段" />
              </tableBox>
            </el-col>
          </el-tab-pane>





          <el-tab-pane label="安全检查" name="second">
            <el-col class="card_list">
              <el-col :span="5" class="card_list_item">
                <img src="@/assets/images/qyyhpc/1.png">
                <span style="font-size: 14px">当期任务总数：<span style="font-size: 20px">{{ totalObj.totalTask }}</span></span>
              </el-col>
              <el-col :span="5" class="card_list_item">
                <img src="@/assets/images/qyyhpc/2.png">
                <span style="font-size: 14px">已完成：<span style="font-size: 20px">{{ totalObj.finish }}</span></span>
              </el-col>
              <el-col :span="5" class="card_list_item">
                <img src="@/assets/images/qyyhpc/3.png">
                <span style="font-size: 14px">完成率：<span style="font-size: 20px">{{ totalObj.finishRate
                  }}</span></span>
              </el-col>
            </el-col>
            <el-col
              style="display: flex;padding: 0 30px;height: 71px;align-items: center;background: #fff;margin-top: 20px">
              <div style="display: flex;align-items: center">
                <el-col style="font-size: 14px;color: #5D6C8E;" :span="4">时间段：</el-col>
                <el-time-picker
                  is-range
                  v-model="value1"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-time-picker>
              </div>
              <div style="display: flex;margin-left: 19px;align-items: center">
                <span style="width: 100px;font-size: 14px;color: #5D6C8E;"> 企业名称：</span>
                <el-input placeholder="输入设备名称查询" v-model="companyName" />
              </div>
              <select2el v-model="value"
                         :suffixSlot="false"
                         :options="options"
                         placeholder="管控措施类型"
                         style="margin-left: 19px"
              />
              <select2el v-model="value"
                         :suffixSlot="false"
                         :options="options"
                         placeholder="岗位负责人"
                         style="margin:0 19px"
              />
              <select2el v-model="value"
                         :suffixSlot="false"
                         :options="options"
                         placeholder="巡检状态" />
              <el-button
                type="primary"
                icon="el-icon-search"
                @click.stop="onSubmit"
                style=" background: linear-gradient(90deg, #5177e4 0%, #5186eb 100%);
                  box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5);
                  border-radius: 4px;
                  height: 32px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-left: 20px
                "
              >查询
              </el-button>
            </el-col>
            <!-- 分割线-->
            <el-divider class="divider"></el-divider>
            <el-col class="table_tool" style="margin-top: 20px;padding: 0 30px">
              <span>合计：{{ this.pageOption.total }}</span>
              <el-button type="primary" class="button">导出</el-button>
            </el-col>
            <el-col style="padding: 0 30px">
              <tableBox :data="tableData" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange" :headerRowStyle="{ height: '16px' }" :height="tableHeight"
                        :mainMaxHeight="200" :pageOption.sync="pageOption" :headerCellStyle="{
              background: '#E0EAF5',
              height: '32px !important',
            }"
              >
                <el-table-column prop="id" label="序号" align="center" width="80" />
                <el-table-column prop="enterName" label="企业名称" />
                <el-table-column prop="RiskAnalysis" label="巡检状态" />
                <el-table-column prop="RiskAnalysisUnit" label="风险分析对象" />
                <el-table-column prop="securityRiskEvent" label="风险分析单元" />
                <el-table-column prop="id" label="安全风险事件" align="center" />
                <el-table-column prop="result" label="可能发生的严重后果" width="180" />
                <el-table-column prop="controlMeasures" label="管控措施类型" />
                <el-table-column prop="investigationContent" label="隐患排查内容" />
                <el-table-column prop="positionName" label="岗位名称" />
                <el-table-column prop="inspectionCycle" label="巡检周期" />
                <el-table-column prop="taskTimePeriod" label="任务时间段" />
              </tableBox>
              
            </el-col>
          </el-tab-pane>
        </el-tabs>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import CHeader from "@/components/Cheader/Cheader";
import select2el from "@/components/select2el/select2el";
import tableBox from "@/components/tableBox/tableBox";
import * as browser from "@/utils/browser";

const { IEVersion, resizeObserver } = browser.default;

export default {
  name: "qyyhpc",
  components: {
    CHeader,
    select2el,
    tableBox
  },
  data() {
    return {
      filter: {
        address: ""
      },
      totalObj: {
        totalTask: 0,
        finish: 0,
        finishRate: ""
      },
      companyName: "",
      tableHeight: 0,
      regionArray: [
        // 全市 盐化新区 洪泽区 盱眙县 涟水县 金湖县 淮阴区 清江浦区
        { name: "全市", label: "" },
        { name: "盐化新区", label: "yhxq" },
        { name: "洪泽区", label: "hzq" },
        { name: "盱眙县", label: "xyx" },
        { name: "涟水县", label: "lsx" },
        { name: "金湖县", label: "jhx" },
        { name: "淮阴区", label: "hyq" },
        { name: "清江浦区", label: "qjpq" }
      ],
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      activeName: "first",
      value: "",
      options: [{
        value: "1",
        label: "1月"
      }, {
        value: "2",
        label: "2月"
      }, {
        value: "3",
        label: "3月"
      }, {
        value: "4",
        label: "4月"
      }, {
        value: "5",
        label: "5月"
      }, {
        value: "6",
        label: "6月"
      }, {
        value: "7",
        label: "7月"
      }, {
        value: "8",
        label: "8月"
      }, {
        value: "9",
        label: "9月"
      }, {
        value: "10",
        label: "10月"
      }, {
        value: "11",
        label: "11月"
      }, {
        value: "12",
        label: "12月"
      }],
      tableData: [],
      pageOption: {
        pageSizes: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500, 1000],
        layout: "total, sizes, prev, pager, next, jumper",
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    };
  },
  resizeMain: null,
  mounted() {
    this.getTableData(true);
    if (IEVersion() == -1) {
      resizeObserver(this.$el, () => {
        this.setHeight();
      }, this.resizeMain);
    }
    setTimeout(() => {
      this.totalObj.totalTask = parseInt(Math.random() * 1000);
      this.totalObj.finish = parseInt(Math.random() * 1000);
      this.totalObj.finishRate = parseInt(Math.random() * 100) + "%";
    }, 500);
  },
  destroyed() {
    if (IEVersion() == -1) {
      this.resizeMain && this.resizeMain.disconnect();
    }
  },
  watch: {
    filter: {
      handler() {
        this.init();
      },
      deep: true
    }
  },
  methods: {
    init() {
      setTimeout(() => {
        this.totalObj.totalTask = parseInt(Math.random() * 1000);
        this.totalObj.finish = parseInt(Math.random() * 1000);
        this.totalObj.finishRate = parseInt(Math.random() * 100) + "%";
        this.getTableData(true);
      }, 300);
    },
    handleClick(tab, event) {
      console.log(tab, event);
      this.init(true);
    },
    getTableData(retry = false) {
      this.tableData = [];
      setTimeout(() => {
        let i = this.pageOption.currentPage === 1 ? 1
          : 1 + this.pageOption.pageSize * (this.pageOption.currentPage - 1);
        this.tableData = [];
        if (retry) {
          this.pageOption.currentPage = 1;
          this.pageOption.total = Math.floor(Math.random() * 1000);
        }
        let tempCount = this.pageOption.pageSize - this.tableData.length;
        for (let index = this.tableData.length; index < tempCount; index++) {
          let item = {
            id: i++,
            enterName: "江苏宏邦化工",
            status: "未巡检",
            RiskAnalysis: "三氯化磷罐区",
            RiskAnalysisUnit: "三氯化磷罐区单元",
            securityRiskEvent: "三氯化磷罐区单元发 生泄露",
            result: "人员中毒、环境污染",
            controlMeasures: "工程技术",
            investigationContent: "成品灌装泵运作是否 正常，有无泄露",
            positionName: "企业主要负 责人",
            inspectionCycle: "1季度1次",
            taskTimePeriod: "2022.7.1- 2022.9.30"
          };
          this.tableData.push(item);
        }
      }, 1000);
    },
    handleSizeChange(val) {
      this.pageOption.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.pageOption.currentPage = val;
      this.getTableData();
    },
    setHeight() {
      this.$el && this.$nextTick(() => {
        let mainHeight = window.innerHeight - document.querySelector(".header-container").offsetHeight,
          header = this.$refs.head ? this.$refs.head.$el : null,
          bodyTop = this.$el.querySelector(".header_top"),
          cartList = this.$el.querySelector(".card_list"),
          tableTool = this.$el.querySelector(".tableTool"),
          paddingTop = 20,
          height = mainHeight - paddingTop;
        if (header) {
          height -= header.offsetHeight;
        }
        if (bodyTop) {
          height -= bodyTop.offsetHeight;
        }
        if (tableTool) {
          height -= tableTool.offsetHeight;
        }
        if (cartList) {
          height -= cartList.offsetHeight;
        }
        this.tableHeight = height + "px";
      });
    }
  }
};
</script>

<style scoped lang="scss">
.header_wrap {
  border-bottom: 1px solid #E0EAF5;
}

.header_top {
  height: 58px;
  background-color: #fff;
  padding: 0 30px
}

.card_list {
  height: 56px;
  display: flex;
  align-items: center;

  .card_list_item {
    display: flex;
    align-items: center
  }

  img {
    margin-right: 9px
  }
}

.box {
  padding: 20px;
  max-width: calc(100% - 40px);
}

.divider {
  position: absolute;
  margin-top: -16px;
}

.table_tool {
  display: flex;
  justify-content: space-between
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 32px;
  background: linear-gradient(90deg, #5177E4 0%, #5186EB 100%);
  box-shadow: 0 2px 4px 0 rgba(81, 133, 235, 0.5000);
  border-radius: 4px;
}

:deep(.el-tabs__nav-wrap::after) {
  background: #E0EAF5;
}

:deep(.el-tabs__item.is-active) {
  color: #5287F2;
}

:deep(.el-tabs__header) {
  margin-top: 18px;
}

:deep(.el-input__icon) {
  position: relative;
}

:deep(.el-icon-time:before) {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 15px;
  background: url("~@/assets/images/qyyhpc/4.png") no-repeat;
}
</style>